require('../login/login.less')
const { default: axios } = require('axios');
const CaptchaMini = require('captcha-mini')

let captcha1 = new CaptchaMini({
    lineWidth: 0,   //线条宽度
    lineNum: 0,       //线条数量
    dotR: 0,          //点的半径
    dotNum: 0,       //点的数量
    preGroundColor: [10, 80],    //前景色区间
    backGroundColor: [150, 250], //背景色区间
    fontSize: 30,           //字体大小
    fontFamily: ['Georgia', '微软雅黑', 'Helvetica', 'Arial'],  //字体类型
    fontStyle: 'fill',      //字体绘制方法，有fill和stroke
    length: 4    //验证码长度
});

let tou = ''
captcha1.draw(document.querySelector('#captcha1'), r => {
    console.log(r, '验证码');
    tou = r
});

let tel = document.querySelector('.tel')
let yzm = document.querySelector('.yzm')
let mm = document.querySelector('.mm')
let mm2 = document.querySelector('.mm2')
let btn = document.querySelector('.btn')
let denglu = document.querySelector('.denglu')

let flag = {
    telFlag: false,
    yzmFlag: false,
    mmFlag: false,
    mm2Flag: false
}

tel.addEventListener('blur', function () {
    if (tel.value.trim() == '') {
        flag.telFlag = false
        tel.style.border = '2px solid red'
    } else if (/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(tel.value.trim())) {
        flag.telFlag = true
        tel.style.border = '2px solid #0f0'
    } else {
        flag.telFlag = false
        tel.style.border = '2px solid #f00'
    }
})

yzm.addEventListener('blur', function () {
    if (yzm.value.trim() == '') {
        flag.yzmFlag = false
        yzm.style.border = '2px solid red'
    } else if ((yzm.value.trim()) == tou) {
        flag.yzmFlag = true
        yzm.style.border = '2px solid #0f0'
    } else {
        flag.yzmFlag = false
        yzm.style.border = '2px solid #f00'
    }
})

mm.addEventListener('blur', function () {
    if (mm.value.trim() == '') {
        flag.mmFlag = false
        mm.style.border = '2px solid red'
    } else if (/^[0-9]*$/.test(mm.value.trim())) {
        flag.mmFlag = true
        mm.style.border = '2px solid #0f0'
    } else {
        flag.mmFlag = false
        mm.style.border = '2px solid #f00'
    }
    // if (mm.value != mm2.value) {
    //     mm.style.border = '2px solid red'
    // }

})

mm2.addEventListener('blur', function () {
    if (mm2.value.trim() == '') {
        flag.mm2Flag = false
        mm2.style.border = '2px solid red'
    } else if (mm2.value == mm.value) {
        flag.mm2Flag = true
        mm2.style.border = '2px solid #0f0'
    } else {
        flag.mm2Flag = false
        mm2.style.border = '2px solid #f00'
    }
    // if (mm.value != mm2.value) {
    //     mm2.style.border = '2px solid red'
    // } else {
    //     mm.style.border = '2px solid #0f0'
    // }
})


btn.addEventListener('click', function () {
    console.log(flag);
    let arr = Object.values(flag)
    let zhenFlag = arr.every(function (item, index) {
        return item
    })
    if (zhenFlag) {
        axios.post('http://47.96.154.185:3701/api/user/register', {
            account: tel.value,
            password: mm.value
        })
            .then(function (res) {
                if (res.data.errno == 0) {
                    location.href = './reg.html'
                } else {
                    alert('用户名已存在')
                }
                console.log(res);
            })
    }

})

denglu.addEventListener('click', function () {
    location.href = './reg.html'
})